<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="啦啦" width="180"> </el-table-column>
      <el-table-column prop="name" label="名字" width="280"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>

    <!-- 
        data 定义table组件需要的数据模型
        prop 定义列的数据应该绑定data中具体的哪个数据
        label 定义表格的列的显示名称
        width 表示的是列显示的宽度


     -->

    <el-pagination
     background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next,->, jumper"
      :total="total"
    >
    </el-pagination>

    <el-button type="text" @click="dialogFormVisible = true">点我弹出 Dialog</el-button>

    <!-- 弹出框 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="活动名称" :label-width="formLabelWidth">
      <el-input v-model="form.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" :label-width="formLabelWidth">
      <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
  </div>
</el-dialog>

<hr>


<el-form  label-width="80px" :model="emp">
  <el-form-item label="编号">
    <el-input v-model="emp.id"></el-input>
  </el-form-item>
  <el-form-item label="姓名">
    <el-input v-model="emp.name"></el-input>
  </el-form-item>
  <el-form-item label="密码">
    <el-input v-model="emp.password"></el-input>
  </el-form-item>
  <el-form-item label="年龄">
    <el-input v-model="emp.age"></el-input>
  </el-form-item>

   <el-form-item label="选择班级" >
    <el-select v-model="emp.cla" placeholder="请选择班级">
      <el-option label="1班" value="1"></el-option>
      <el-option label="2班" value="2"></el-option>
    </el-select>
    </el-form-item>
    <el-form-item>
        <el-button @click="onSubmit()">提交表单</el-button>
    </el-form-item>
</el-form>


  </div>
</template>

<script>
export default {
  data() {
    return {
          emp: {
          id: '',
          name: '',
          password: '',
          age:0,
            cla:0
        },


         formLabelWidth: '120px',
         form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        dialogFormVisible: false,
        total:100,
        pageSize:5,
      currentPage4: 1,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },

  methods: {
    onSubmit(){
        console.log("我提交了数据是：",this.emp);
    },
    //当每页显示条数发生变化时触发的事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      
    },
    //当前页发生变化时触发的事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    
  },
};
</script>

<style>
</style>
